<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>商品管理</title>

     <script src="../static/js/vue.js"></script>
<script src="../static/js/axios.js"></script>
<link rel="stylesheet" href="../static/elementui/theme-chalk/index.css"/>
<script src="../static/elementui/index.js"></script>

    <!--<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
    <script src="js/vue.js"></script>
    <script src="element-ui/lib/index.js"></script>
    <script src="js/axios-0.18.0.js"></script>-->

    <style>
        .avatar-uploader .el-upload {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }
        .avatar-uploader .el-upload:hover {
            border-color: #409EFF;
        }
        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 78px;
            height: 78px;
            line-height: 78px;
            text-align: center;
        }
        .avatar {
            width: 178px;
            height: 178px;
            display: block;
        }
    </style>

</head>
<body>
<div id="div">
<!--    <el-row>-->
<!--        <el-button type="primary" size="small" @click="add">发布商品</el-button>-->
<!--    </el-row>-->
    <el-divider></el-divider>

    商品名称：<el-input placeholder="请输入商品名称" style="width: 200px;" v-model="ruleForm.goodsName"></el-input>
    课程编号：<el-input placeholder="请输入课程编号" style="width: 200px;" v-model="ruleForm.goodsNo"></el-input>
    商品状态：<el-select slot="prepend" placeholder="请选择" style="width: 150px;" v-model="ruleForm.status">
    <el-option label="销售中" value="0"></el-option>
    <el-option label="已下架" value="1"></el-option>
</el-select>
    价格区间：<el-input placeholder="元" style="width: 85px;" v-model="ruleForm.priceBegin"></el-input><i class="el-icon-minus"></i>
    <el-input placeholder="元" style="width: 85px;" v-model="ruleForm.priceEnd"></el-input>&nbsp;
    <br><br>
    销量区间：<el-input style="width: 85px;" v-model="ruleForm.saleBegin"></el-input><i class="el-icon-minus"></i>
    <el-input style="width: 85px;" v-model="ruleForm.saleEnd"></el-input>
    &nbsp;&nbsp;&nbsp;创建时间： <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.createTime">
</el-date-picker>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <el-button type="primary" size="small" @click="find">查询</el-button>
    &nbsp;&nbsp;&nbsp;
    <el-button type="primary" size="small" @click="resetForm()">重置</el-button>
    <el-divider></el-divider>

    <table class="table" style="text-align: center; width: 100%">
        <thead>
        <tr style="height: 50px">
            <th style="display: none;">序号</th>
            <th>商品编号</th>
            <th>创建时间</th>
            <th>商品名称</th>
            <th>价格</th>
            <th>访问量</th>
            <th>销量</th>
            <th>上架</th>
            <th>推荐</th>
            <th>操作</th>
        </tr>

        <tbody>
        <tr v-for="(p,index) in rows" :key="index" style="height: 50px">
            <td style="display: none;">{{index}}</td>
            <td >{{p.goodsNo}}</td>
            <td >{{p.uploadTime}}</td>
            <td >{{p.goodsName}}</td>
            <td >{{p.marketPrice}}</td>
            <td >{{p.visits}}</td>
            <td >{{p.sales}}</td>


            <!---->
            <td>
                <el-switch v-model="csData[index]" active-color="#13ce66" @change="changeSwitch(csData[index],index)">
                </el-switch>
            </td>

            <td>
                <el-switch v-model="csData1[index]" active-color="#13ce66" @change="changeSwitch1(csData1[index],index)">
                </el-switch>
            </td>

            <!---->

<!--            <td v-if="p.status == 0">在售</td>-->
<!--            <td  v-if="p.status == 1">下架</td>-->

            <el-row>
                <td :class="'text-center'">
                    <!-- 方法不能定义为delete ，因为这玩意是关键字-->
<!--                    <el-button type="primary" size="mini" @click="recommend(index)" v-if="p.recommend == 1">推荐</el-button>-->
<!--                    <el-button type="primary" size="mini" @click="recommend(index)" v-if="p.recommend == null">推荐</el-button>-->
<!--                    <el-button type="primary" size="mini" @click="outRecommend(index)" v-if="p.recommend == 0">取消推荐</el-button>-->

<!--                    <el-button type="primary" size="mini" @click="sold(index)"  v-if="p.status == 0">下架</el-button>-->
<!--                    <el-button type="primary" size="mini" @click="putAway(index)"  v-if="p.status == 1">上架</el-button>-->
                    <el-button type="primary" size="mini" @click="showUpGoods(index)">编辑</el-button>

                    <el-button type="primary" size="mini" @click="del(index)">删除</el-button>
                </td>
            </el-row>
        </tr>
        </tbody>
    </table>

    <!-- 修改模态框 -->
    <el-dialog title="修改商品" :visible.sync="dialogTableVisible4add" @close="resetForm('addForm')">

        <table cellspacing="20" cellpadding="0" >
            <tr>
                <td>商品名称：</td>
                <td colspan="5">
                    <el-input  v-model=" goodsName" placeholder="最多输入40个字" maxlength="40" show-word-limit></el-input>
                </td>
            </tr>
            <tr>
                <td>商品介绍：</td>
                <td colspan="5">
                    <el-input v-model=" goodsDesc" show-word-limit type="textarea" :rows="4" placeholder="请输入商品介绍">
                    </el-input>
                </td>
            </tr>
<!--            <tr>-->
<!--                <td>商品标签：</td>-->
<!--                <td colspan="5">-->
<!--                    <el-select slot="prepend" style="width: 150px;" v-model="brandLabel">-->
<!--                        <el-option label="非实物" value="0"></el-option>-->
<!--                        <el-option label="实物" value="1"></el-option>-->
<!--                    </el-select>-->
<!--                </td>-->
<!--            </tr>-->
            <tr v-if="brandLabel==0">
                <td>课时：</td>
                <td colspan="5">
                    <el-input placeholder="课时" style="width: 150px;" v-model="classHour"></el-input>
                </td>
            </tr>
            <tr>
                <td>商品图：</td>
                <td colspan="5">


                    <el-upload
                            class="avatar-uploader"
                            action="http://localhost:8080/ep/files/upload"
                            :show-file-list="false"
                            :on-success="handleAvatarSuccess"
                            :before-upload="beforeAvatarUpload">
                        <img v-if="imageUrl" :src="imageUrl" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>

                    <template slot-scope="scope">
                        <img width="50px" height="50px" :src="imageUrl"/>
                    </template>

                </td>
            </tr>
            <tr v-if="brandLabel==0">
                <td>视频：</td>
                <td colspan="5">


                    <el-upload
                            class="avatar-uploader"
                            action="http://localhost:8080/ep/files/upload"
                            :show-file-list="false"
                            :on-success="handleAvatarSuccess1"
                            :before-upload="beforeAvatarUpload1">
                        <img v-if="detail" :src="detail" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>

                    <template slot-scope="scope" >
                        <img width="50px" height="50px" :src="detail"/>
                    </template>

                </td>
            </tr>
            <tr >
                <td>老师：</td>
                <td colspan="5">
                    <el-select  style="width: 150px;" v-model="fkTeacherId">
                        <el-option :label="p.teacherName" :value="index" v-for="(p,index) in teacher[0]" :key="index" ></el-option>
                    </el-select>
                </td>
            </tr>
            <tr >
                <td>类别：</td>
                <td colspan="5">
                    <el-select  style="width: 150px;" v-model="fkProjectId">
                        <el-option :label="p.projName" :value="index" v-for="(p,index) in pro[0]" :key="index" ></el-option>
                    </el-select>
                </td>
            </tr>
            <tr v-if="brandLabel==0">
                <td>有效期：</td>
                <td colspan="5">
                    <el-select slot="prepend" style="width: 150px;" v-model="useful">
                        <el-option label="一年" value="1"></el-option>
                        <el-option label="两年" value="2"></el-option>
                        <el-option label="三年" value="3"></el-option>
                    </el-select>
                </td>
            </tr>

            <tr>
                <td>商品价格：</td>
                <td colspan="5">
                    <el-input placeholder="元" style="width: 150px;" v-model="marketPrice"></el-input>
                </td>
            </tr>
            <tr>
                <td>划线价：</td>
                <td colspan="5">
                    <el-input placeholder="元" style="width: 150px;" v-model="salesPrice"></el-input>
                </td>
            </tr>
            <tr>
                <td>库存：</td>
                <td colspan="5">
                    <el-input style="width: 150px;" v-model="stock"></el-input>

                </td>
            </tr>
            <tr>
                <td>上架时间</td>
                <td colspan="5">
                    <el-radio label="0" v-model="status">立即上架</el-radio>
                    <el-radio label="1" v-model="status">暂不售卖</el-radio>
                </td>
            </tr>
            <tr>
                <td></td>
                <td>
                    <el-button type="primary" @click="saveGoods()">保存</el-button>
                    &nbsp;&nbsp;&nbsp;&nbsp;
                    <el-button type="primary" @click="upOut()">取消</el-button>
                </td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
        </table>
    </el-dialog>


    <!--分页展示-->
    <div class="pagechose">
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="page"
                :page-sizes="[5, 10, 20, 30]"
                :page-size="size"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
        </el-pagination>
    </div>

</div>
</body>
<script>
    let allGoods = []
    let div = new Vue({
        el: "#div",
        data: {

            /*分页参数*/
            total:0,//总条数
            size:5,//每页条数
            page:1,//第一页
            /*分页参数*/


            /*修改模态框数据*/
            id:'',
            goodsName: '',
            goodsDesc: "",
            brandLabel: "",
            classHour: "",
            image: "",
            videoId: "",
            fkTeacherId: "",
            fkProjectId: "",
            useful: "",
            marketPrice: "",
            salesPrice: "",
            stock: "",
            status: "",
            imageUrl: "",
            detail:"",

            dialogTableVisible4add: false, //添加窗口显示状态
            dialogTableVisible4edit: false, //编辑窗口显示状态
            /*修改模态框数据*/
            ruleForm: {
                goodsName: "",
                goodsNo: "",
                status: "",
                priceBegin: "",
                priceEnd: "",
                saleBegin: "",
                saleEnd: "",
                createTime: ""
            },
            rows: [],
            /*项目数据*/
            pro:[],
            /*老师数据*/
            teacher:[],

            /* 上下架 */
            csData: [],
            /* 推荐 */
            csData1: [],
        },

        methods: {



            //时间格式化
            dateFormat:function(row,column){
                var t=new Date(row.updateTime);//row 表示一行数据, updateTime 表示要格式化的字段名称
                return t.getFullYear()+"-"+(t.getMonth()+1)+"-"+t.getDate()+" "+t.getHours()+":"+t.getMinutes()+":"+t.getSeconds()+"."+t.getMilliseconds();
            },

            /**/
            handleAvatarSuccess(res, file) {
                console.info(res);
                this.imageUrl=res;

            },
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            },
            /**/
            /**/
            handleAvatarSuccess1(res, file) {
                console.info(res);
                this.detail=res;
            },
            beforeAvatarUpload1(file) {
                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 20;

                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            },
            /**/

            /*分页方法*/
            handleSizeChange:function(val){
                this.size = val
                this.page = 1
                this.rows = []
                if(this.total >= val ){
                    for(let i=0; i<val; i++){
                        this.rows.push(allGoods[i])
                    }
                }else {
                    for(let i=0; i<this.total; i++){
                        this.rows.push(allGoods[i])
                    }
                }
            },
            handleCurrentChange:function (val){
                let size = this.size
                this.rows = []
                if(val*size > this.total){
                    for(let i=size*(val-1); i<this.total; i++){
                        this.rows.push(allGoods[i])
                    }
                }else{
                    for(let i=size*(val-1); i<size*val; i++){
                        this.rows.push(allGoods[i])
                    }
                }
            },
            /*分页方法*/

            /* 弹出修改模态框 */
            showUpGoods(index) {
                //弹出窗口
                this.dialogTableVisible4add = true;
                this.id=this.rows[index].id

                this.goodsName=this.rows[index].goodsName
                this.goodsDesc=this.rows[index].goodsDesc
                this.brandLabel=this.rows[index].brandLabel
                this.classHour=this.rows[index].classHour
                this.image=this.rows[index].image
                this.videoId=this.rows[index].videoId
                this.fkTeacherId=this.rows[index].fkTeacherId
                this.fkProjectId=this.rows[index].fkProjectId
                this.useful=this.rows[index].useful
                this.marketPrice=this.rows[index].marketPrice
                this.salesPrice=this.rows[index].salesPrice
                this.stock=this.rows[index].stock
                this.status=this.rows[index].status
                this.imageUrl=this.rows[index].image
                this.detail=this.rows[index].detail
               console.info(this.rows[index])
            },
            upOut:function(){
                //弹出窗口
                this.dialogTableVisible4add = false;
            },

            saveGoods: function() {

                axios.get("[[@{/goods/upGoods}]]", {
                    params: {
                        goodsName: this.goodsName,
                        goodsDesc: this.goodsDesc,
                        brandLabel: this.brandLabel,
                        classHour: this.classHour,
                        videoId: this.videoId,
                        fkTeacherId: this.fkTeacherId,
                        fkProjectId: this.fkProjectId,
                        useful: this.useful,
                        marketPrice: this.marketPrice,
                        salesPrice: this.salesPrice,
                        stock: this.stock,
                        status: this.status,
                         image:this.image,
                        detail:this.detail,
                        id:this.id
                    },
                }).then(function(res) {
                    console.info(res)
                    console.info(res.data)

                });
                //关闭添加窗口
                this.dialogTableVisible4add = false;
            },

            /* 查询 */
            find: function() {
                axios.get("[[@{/goods/findLike}]]", {
                    params: {
                        goodsName: this.ruleForm.goodsName,
                        goodsNo: this.ruleForm.goodsNo,
                        status: this.ruleForm.status,
                        salesPrice: this.ruleForm.priceBegin,
                        marketPrice: this.ruleForm.priceEnd,
                        saleBegin: this.ruleForm.saleBegin,
                        saleEnd: this.ruleForm.saleEnd,
                        createTime: this.ruleForm.createTime,
                    },
                }).then(function(res) {
                    console.info(res)

                    allGoods = res.data.data
                    div.$data.rows=[]
                    div.$data.total=allGoods.length
                    for(let i=0; i<5; i++ ){
                        if (i<allGoods.length){
                            div.$data.rows.push(allGoods[i])
                        }
                    }

                    // this.rows.push(res.data.data)
                });

            },
            /* 重置 */
            resetForm: function() {
                //重置person对象
                this.ruleForm = {
                    goodsName: "",
                    goodsNo: "",
                    status: "",
                    priceBegin: "",
                    priceEnd: "",
                    saleBegin: "",
                    saleEnd: "",
                    createTime: ""
                }

            },

            /*推荐按钮*/
            changeSwitch1(on, index) {
                if (on) {
                    this.recommend(index)
                } else {
                    this.outRecommend(index)
                }
            },

            /* 推荐 */
            recommend: function(index) {
                let recommendId = this.rows[index].id
                axios.get("[[@{/goods/}]]" + recommendId)
                    .then(function(res) {
                        console.info(res.data)
                    });
            },
            /* 取消推荐 */
            outRecommend: function(index) {
                let outRecommendId = this.rows[index].id
                axios.get("[[@{/goods/outRecommend}]]",{
                    params:{
                        id:outRecommendId
                    }
                })
                    .then(function(res) {
                        console.info(res.data)
                    });
            },

            /*上下架按钮*/
            changeSwitch(on, index) {
                if (on) {
                    this.putAway(index)
                } else {
                    this.sold(index)
                }
            },



            /* 下架 */
            sold: function(index) {
                let soldId = this.rows[index].id
                axios.get("[[@{/goods/sold}]]", {
                    params: {
                        soid: soldId
                    }
                }).then(function(res) {
                    console.info(res)
                    console.info(res.data)
                    // location.reload()
                });
            },
            /* 上架 */
            putAway: function(index) {
                let soldId = this.rows[index].id
                axios.get("[[@{/goods/putAway}]]", {
                    params: {
                        soid: soldId
                    }
                }).then(function(res) {
                    console.info(res)
                    console.info(res.data)
                    // location.reload()
                });
            },

            /* 编辑 */
            compile: function(index) {
                let soldId = this.rows[index].id
                window.location.href = "[[@{/goods/upGoods?id=}]]" + soldId
            },
            /* 删除 */

            /*删除弹框*/
            del:function(inedx) {
                this.$confirm('此操作将删除该数据, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.del1(inedx)
                    this.total=this.total-1
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            //
            del1: function(index) {

                let delId = this.rows[index].id
                axios.get("[[@{/goods/del}]]", {
                    params: {
                        delId: delId
                    }
                }).then(res => { //此处一定要用 箭头函数  不然this 就不是this
                    console.info(res)
                    console.info(res.data.data)
                    this.rows.splice(index, 1)
                });

            },
        },

        mounted() {
                    axios.get("[[@{/goods/page}]]")
                        .then(res => { //此处一定要用 箭头函数  不然this 就不是this
                            console.info(res.data.data)
                            allGoods = res.data.data
                            div.$data.total=allGoods.length
                            for(let i=0; i<5; i++ ){
                                if (i<allGoods.length){
                                    div.$data.rows.push(allGoods[i])
                                }
                            }

                            /*默认上下架是什么状态*/
                            for (let j = 0; j < allGoods.length; j++) {
                                if (allGoods[j].status == 0) {
                                    this.csData.push(true)
                                } else {
                                    this.csData.push(false)
                                }
                                // console.info(csData)
                            }

                            /*默认推荐架是什么状态*/
                            for (let j = 0; j < allGoods.length; j++) {
                                if (allGoods[j].status == 0) {
                                    this.csData1.push(true)
                                } else {
                                    this.csData1.push(false)
                                }
                                // console.info(csData)
                            }
                        });

            axios.get("[[@{/goods/teaAndPro}]]")
                .then(res => { //此处一定要用 箭头函数  不然this 就不是this
                    console.info(res.data.data)
                    div.$data.teacher.push(res.data.data)
                });
            axios.get("[[@{/goods/teaAndPro1}]]")
                .then(res => { //此处一定要用 箭头函数  不然this 就不是this
                    console.info(res.data.data)
                    div.$data.pro.push(res.data.data)
                });



        },

    });
</script>
</html>
